<html><head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"><title>用户指南 - 简历一个图形用户 界面 (GUI)</title></head>
<body bgcolor="#EFF1F0" link="#3A3966" vlink="#000000" alink="#000000">
<font face="Verdana, sans-serif" size="2"><p align="center"><b><font size="5">用户指南 - 简历一个图形用户 界面 (GUI)</font></b></p>

In addition to the <a href="ug_textoutput.html">console window</a>, PureBasic supports the creation of graphical user interfaces (GUI) too. So let's revisit the file properties example from previous items again and turn it into a GUI application. <br><br>注释 that PureBasic provides a far easier way of getting this particular 作业 done already - the <a href="../gadget/explorerlistgadget.html">ExplorerListGadget()</a>; but, as the example is intended to introduce managing GUI elements, using that 小工具 would defeat this 对象 a 比特. 

<pre><font face="Courier New, Courier, mono"size="2">  <font color="#3A3966">; The structure for file information as before.</font>
  <b><font color="#3A3966">Structure</font></b> FILEITEM
    Name.s
    Attributes.i
    Size.q
    DateCreated.i
    DateAccessed.i
    DateModified.i
  <b><font color="#3A3966">EndStructure</font></b>
  
  <font color="#3A3966">; This is a constant to identify the window.</font>
  <b><font color="#3A3966">Enumeration</font></b>
    <font color="#924B72">#WindowFiles</font>
  <b><font color="#3A3966">EndEnumeration</font></b>
  
  <font color="#3A3966">; This is an enumeration to identify controls which will appear on the window.</font>
  <b><font color="#3A3966">Enumeration</font></b>
    <font color="#924B72">#Folder</font>
    <font color="#924B72">#Files</font>
  <b><font color="#3A3966">EndEnumeration</font></b>
  
  <font color="#3A3966">; Now we define a list of files using the structure previously specified.</font>
  <b><font color="#3A3966">NewList</font></b> <font color="#3A3966">Files</font>.FILEITEM()
  
  <font color="#3A3966">; And some working variables to make things happen.</font>
  <b><font color="#3A3966">Define</font></b>.s Access, Attrib, Create, Folder, Modify, Msg, Num, Size
  <b><font color="#3A3966">Define</font></b>.l Result, Flags
  
  <font color="#3A3966">; These variables will receive details of GUI events as they occur in the program.</font>
  <b><font color="#3A3966">Define</font></b>.l Event, EventWindow, EventGadget, EventType, EventMenu
  
  <font color="#3A3966">; This function gets the home directory for the logged on user.</font>
  Folder =<font color="#3A3966"> GetHomeDirectory</font>()
  
  <font color="#3A3966">; Open the directory to enumerate its contents.</font>
  Result =<font color="#3A3966"> ExamineDirectory</font>(0, Folder, "*.*")
  
  <font color="#3A3966">; If this is ok, begin enumeration of entries.</font>
  <b><font color="#3A3966">If</font></b> Result
    <font color="#3A3966">; Loop through until NextDirectoryEntry(0) becomes zero - indicating that there are no more entries.</font>
    <b><font color="#3A3966">While</font></b> <font color="#3A3966">NextDirectoryEntry</font>(0)
      <font color="#3A3966">; If the directory entry is a file, not a folder.</font>
      <b><font color="#3A3966">If</font></b> <font color="#3A3966">DirectoryEntryType</font>(0) = <font color="#924B72">#PB_DirectoryEntry_File</font>

        <font color="#3A3966">; Add a new element to the list.</font>
<font color="#3A3966">        AddElement</font>(<font color="#3A3966">Files</font>())
        <font color="#3A3966">; And populate it with the properties of the file.</font>
<font color="#3A3966">        Files</font>()\Name =<font color="#3A3966"> DirectoryEntryName</font>(0)
<font color="#3A3966">        Files</font>()\Size =<font color="#3A3966"> DirectoryEntrySize</font>(0)
<font color="#3A3966">        Files</font>()\Attributes =<font color="#3A3966"> DirectoryEntryAttributes</font>(0)
<font color="#3A3966">        Files</font>()\DateCreated =<font color="#3A3966"> DirectoryEntryDate</font>(0, <font color="#924B72">#PB_Date_Created</font>)
<font color="#3A3966">        Files</font>()\DateAccessed =<font color="#3A3966"> DirectoryEntryDate</font>(0, <font color="#924B72">#PB_Date_Accessed</font>)
<font color="#3A3966">        Files</font>()\DateModified =<font color="#3A3966"> DirectoryEntryDate</font>(0, <font color="#924B72">#PB_Date_Modified</font>)
      <b><font color="#3A3966">EndIf</font></b>
    <b><font color="#3A3966">Wend</font></b>
    <font color="#3A3966">; Close the directory.</font>
<font color="#3A3966">    FinishDirectory</font>(0)
  <b><font color="#3A3966">EndIf</font></b>
  
  <font color="#3A3966">; Sort the list into ascending alphabetical order of file name.</font>
<font color="#3A3966">  SortStructuredList</font>(<font color="#3A3966">Files</font>(), <font color="#924B72">#PB_Sort_Ascending</font>,<font color="#3A3966"> OffsetOf</font>(FILEITEM\Name), <font color="#924B72">#PB_String</font>)
  
  <font color="#3A3966">; The interesting stuff starts to happen here...</font>
  
  <font color="#3A3966">; This line defines a flag for the window attributes by OR-ing together the desired attribute constants.</font>
  Flags = <font color="#924B72">#PB_Window_SystemMenu</font> | <font color="#924B72">#PB_Window_SizeGadget</font> | <font color="#924B72">#PB_Window_MinimizeGadget</font> | <font color="#924B72">#PB_Window_MaximizeGadget</font> | <font color="#924B72">#PB_Window_TitleBar</font>
  
  <font color="#3A3966">; Open a GUI window.</font>
<font color="#3A3966">  OpenWindow</font>(<font color="#924B72">#WindowFiles</font>, 50, 50, 450, 400, "File Properties", Flags)
  <font color="#3A3966">; A text gadget to show the name of the folder.</font>
<font color="#3A3966">  TextGadget</font>(<font color="#924B72">#Folder</font>, 5, 40, 440, 25, Folder)
  <font color="#3A3966">; A list icon gadget to hold the file list and properties.</font>
<font color="#3A3966">  ListIconGadget</font>(<font color="#924B72">#Files</font>, 5, 70, 440, 326, "#", 35)
  <font color="#3A3966">; Add columns to the ListIconGadget to hold each property.</font>
<font color="#3A3966">  AddGadgetColumn</font>(<font color="#924B72">#Files</font>, 1, "Name", 200)
<font color="#3A3966">  AddGadgetColumn</font>(<font color="#924B72">#Files</font>, 2, "Created", 100)
<font color="#3A3966">  AddGadgetColumn</font>(<font color="#924B72">#Files</font>, 3, "Accessed", 100)
<font color="#3A3966">  AddGadgetColumn</font>(<font color="#924B72">#Files</font>, 4, "Modified", 100)
<font color="#3A3966">  AddGadgetColumn</font>(<font color="#924B72">#Files</font>, 5, "Attributes", 150)
<font color="#3A3966">  AddGadgetColumn</font>(<font color="#924B72">#Files</font>, 6, "Size", 100)
  
  <font color="#3A3966">; Load the files into the list view.</font>
  <b><font color="#3A3966">ForEach</font></b> <font color="#3A3966">Files</font>()
    <font color="#3A3966">; Display the item number and file name.</font>
    Num =<font color="#3A3966"> StrU</font>(<font color="#3A3966">ListIndex</font>(<font color="#3A3966">Files</font>()) + 1)
    
    <font color="#3A3966">; These lines convert the three date values to something more familiar.</font>
    Create =<font color="#3A3966"> FormatDate</font>("%dd/%mm/%yyyy",<font color="#3A3966"> Files</font>()\DateCreated)
    Access =<font color="#3A3966"> FormatDate</font>("%dd/%mm/%yyyy",<font color="#3A3966"> Files</font>()\DateAccessed)
    Modify =<font color="#3A3966"> FormatDate</font>("%dd/%mm/%yyyy",<font color="#3A3966"> Files</font>()\DateModified)
    
    <font color="#3A3966">; Convert the file size to a padded string the same as with the index value above,</font>
    <font color="#3A3966">; but allow space for the maximum size of a quad.</font>
    Size =<font color="#3A3966"> StrU</font>(<font color="#3A3966">Files</font>()\Size)
    
    <font color="#3A3966">; Convert the attributes to a string, for now.</font>
    Attrib =<font color="#3A3966"> StrU</font>(<font color="#3A3966">Files</font>()\Attributes)
    
    <font color="#3A3966">; Build a row string.?</font>
    <font color="#3A3966">; The Line Feed character 'Chr(10)' tells the gadget to move to the next column.</font>
    Msg = Num +<font color="#3A3966"> Chr</font>(10) +<font color="#3A3966"> Files</font>()\Name +<font color="#3A3966"> Chr</font>(10) + Create +<font color="#3A3966"> Chr</font>(10) + Access +<font color="#3A3966"> Chr</font>(10) + Modify +<font color="#3A3966"> Chr</font>(10) + Attrib +<font color="#3A3966"> Chr</font>(10) + Size
    
    <font color="#3A3966">; Add the row to the list view gadget.</font>
<font color="#3A3966">    AddGadgetItem</font>(<font color="#924B72">#Files</font>, -1, Msg)
  <b><font color="#3A3966">Next</font></b> <font color="#3A3966">Files</font>()
  
  <font color="#3A3966">; This is the event loop for the window.?</font>
  <font color="#3A3966">; It will deal with all the user interaction events that we wish to use. </font>
  
  <b><font color="#3A3966">Repeat</font></b>
    <font color="#3A3966">; Wait until a new window or gadget event occurs.</font>
    Event =<font color="#3A3966"> WaitWindowEvent</font>()
    <font color="#3A3966">; In programs with more than one form, which window did the event occur on.</font>
    EventWindow =<font color="#3A3966"> EventWindow</font>()
    <font color="#3A3966">; Which gadget did the event occur on.</font>
    EventGadget =<font color="#3A3966"> EventGadget</font>()
    <font color="#3A3966">; What sort of event occurred.</font>
    EventType =<font color="#3A3966"> EventType</font>()
    
    <font color="#3A3966">; Take some action.</font>
    <b><font color="#3A3966">Select</font></b> Event
        
      <b><font color="#3A3966">Case</font></b> <font color="#924B72">#PB_Event_Gadget</font>
        <font color="#3A3966">; A gadget event occurred.</font>
        <b><font color="#3A3966">If</font></b> EventGadget = <font color="#924B72">#Folder</font>
        <b><font color="#3A3966">ElseIf</font></b> EventGadget = <font color="#924B72">#Files</font>
        <b><font color="#3A3966">EndIf</font></b>
        
      <b><font color="#3A3966">Case</font></b> <font color="#924B72">#PB_Event_CloseWindow</font>
        <font color="#3A3966">; The window was closed.</font>
        <b><font color="#3A3966">If</font></b> EventWindow = <font color="#924B72">#WindowFiles</font>
<font color="#3A3966">          CloseWindow</font>(<font color="#924B72">#WindowFiles</font>)
          <b><font color="#3A3966">Break</font></b>
        <b><font color="#3A3966">EndIf</font></b>
        
    <b><font color="#3A3966">EndSelect</font></b>
    
    <font color="#3A3966">; Go round and do it again.</font>
    <font color="#3A3966">; In practice the loop isn't infinite because it can be stopped by clicking the window's Close button.</font>
  <b><font color="#3A3966">ForEver</font></b>
</font></pre>



At this point the application already has some useful features. However, it has some problems too: <br>
1) You can't choose a folder to show. <br>
2) You can't update the list contents without closing and restarting the program. <br>
3) If you resize the window, the gadgets don't resize with it. <br>
4) The attributes column is still not very useful. <br>
We will revisit this program again later on to fix all these issues. 


 


<p><b>用户指南导航</b></p><blockquote>

<a href="ug_textoutput.html">&lt; Previous: Displaying text output (Console)</a> | <a href="ug_overview.html">Overview</a> | <a href="ug_graphics.html">Next: Displaying graphics output &amp; simple drawing &gt;</a> 
</body></html>